<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https:////at.alicdn.com/t/font_2149353_7xym7r0qkfe.css">
</head>
<body>
    <div class="top">
        <div class="top-mid">
            <ul>
                <li><a href="">小米网</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">米聊</a></li>
                <li><a href="">游戏</a></li>
                <li><a href="">多看阅读</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">小米移动版</a></li>
                <li><a href="">Select region</a> </li>
                <li><a href="">米粉节答疑</a></li>
            </ul>
            <ul>
                <li><a href="">注册</a></li>
                <li><a href="">登录</a></li>
            </ul>
        </div>  
    </div>
    <div class="body">
        <div class="body-top">
            <div class="body-top-left"></div>
            <p>4月4日开放购买</p>
            <div class="body-top-input">
                <input type="text" placeholder="搜索您需要的商品">
                <span>小米手环</span>
                <span>耳机音响</span>
                <span>保护壳</span>
                <button><i class="iconfont icon-fangdajing"></i></button>
            </div>
            <button class="shop-car">购物车</button>
        </div> 
        <div class="body-mid">
            <div class="nav">
                <div class="nav-left">
                    <p>全部商品分类</p>
                </div>
                <div class="nav-right">
                    <p>首页</p>
                    <p>小米手机</p>
                    <p>红米</p>
                    <p>小米平板</p>
                    <p>小米电视</p>
                    <p>盒子</p>
                    <p>路由器</p>
                    <p>合约机</p>
                    <p>服务</p>
                    <p>社区</p>
                </div>
            </div>
            <div class="list">
                <div>
                    <p class="list-one">购买手机</p>
                    <p class="list-tow">
                        <span>小米Noto</span>
                        <span>小米4</span>
                        <span>红米</span>
                        <span> 红米Noto</span>      
                    </p>
                </div>
                <div>
                    <p class="list-one">购买电视与平板</p>
                    <p class="list-tow">
                        <span>小米电视</span>
                        <span>小米盒子</span>
                        <span>小米平板</span> 
                    </p>
                </div>
                <div>
                    <p class="list-one">路由器与智能硬件</p>
                    <p class="list-tow">
                        <span>路由器</span>
                        <span>体重秤 </span>
                        <span>净化器与滤芯</span>
                    </p>
                </div>
                <div>
                    <p class="list-one">插线板、移动电源与电池</p>
                    <p class="list-tow">
                        <span>小米移动电源</span>
                        <span>电池 </span>
                        <span>充电器</span>
                    </p>
                </div>
                <div>
                    <p class="list-one">耳机音箱与存储卡</p>
                    <p class="list-tow">
                        <span>小米头戴式耳机</span>
                        <span>小米活塞耳机 </span>
                    </p>
                </div>
                <div>
                    <p class="list-one">保护套与贴膜</p>
                    <p class="list-tow">
                        <span>保护套/保护壳</span>
                        <span>贴膜</span>
                        <span>防尘塞</span>
                    </p>
                </div>
                <div>
                    <p class="list-one">后盖与个性化配件</p>
                    <p class="list-tow">
                        <span>米键</span>
                        <span>后盖 </span>
                        <span>贴纸</span>
                        <span> 手机支架</span>
                    </p>
                </div>
                <div>
                    <p class="list-one">小米生活方式</p>
                    <p class="list-tow">
                        <span>服装</span>
                        <span>米兔 </span>
                        <span>背包</span>
                        <span> 生活周边</span>
                    </p>
                </div>
            </div>
            <div class="rotation">
                <div class="spot">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
                <div class="wrap">
                    <img src="images/banner1.png" alt="">
                    <img src="images/banner2.png" alt="">
                    <img src="images/banner3.png" alt="">
                    <img src="images/banner4.png" alt="">
                    <img src="images/banner5.png" alt="">
                    <img src="images/banner1.png" alt="">
                </div>
                
            </div>
            <div class="rotation-bottom">
                <div class="phone phone1"></div>
                <div class="phone phone2"></div>
                <div class="phone phone3"></div>
            </div>
        </div>
        <div class="body-mid-between">
            <p>小米明星单品</p>
            <p>根据机型选配件</p>
            <div class="arrow">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="star-piece">
            <div class="star-one">
                <p class="star-piece-title text-color1">小米智能插座</p>
                <p class="star-piece-introduce text-color2" >让普通家电变得智能</p>
            </div>
            <div class="star-tow">
                <p class="star-piece-title text-color1">小米空气净化器</p>
                <p class="star-piece-introduce text-color2" >高性能智能空气净化器立即预约</p>
            </div>
            <div class="star-three">
                <p class="star-piece-title text-color1">小米活塞耳机简装版</p>
                <p class="star-piece-introduce text-color2" >好声音源自活塞式音腔，延续经典设计</p>
            </div>
            <div class="star-four">
                <p class="star-piece-title text-color1">小米路由器</p>
                <p class="star-piece-introduce text-color2" >顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
            </div>
        </div>
        <div class="body-mid-between">
            <p class="text-color1">新品上架</p>
            <div class="arrow">
                <span class="more text-color1">更多></span>
            </div>
        </div>
        <div class="newthing">
            <div class="new-left">
                <div class="mi-box"></div>
                <div class="other">
                    <div class="new-imformation">
                        <p>小米手环</p>
                        <p>79元</p>
                    </div>
                </div>
                <div class="other-n other">
                    <div class="other-mini">
                        <div class="new-imformation">
                            <p>五周年米兔钥匙扣</p>
                            <p>9.9元</p>
                        </div>
                    </div>
                    <div class="other-mini">
                        <div class="new-imformation">
                            <p>QCY派Q8蓝牙耳机</p>
                            <p>59.9元</p>
                        </div>
                    </div>
                </div>
                <div class="other">
                    <div class="new-imformation">
                        <p>小米T恤路标MILOGO</p>
                        <p>39元</p>
                    </div>
                </div>
                <div class="other">
                    <div class="new-imformation">
                        <p>小米4实木后盖</p>
                        <p>69元</p>
                    </div>
                </div>
                <div class="other">
                    <div class="new-imformation">
                        <p>小米Note超薄保护壳</p>
                        <p>49元</p>
                    </div>
                </div>
                <div class="other">
                    <div class="new-imformation">
                        <p>小米自拍杆</p>
                        <p>49元</p>
                    </div>
                </div>
                <div class="other">
                    <div class="new-imformation">
                        <p>先锋CL31系列耳式耳机</p>
                        <p>99元</p>
                    </div>
                </div>
            </div>
            <div class="new-right">
                <div class="on-sale sale1">
                    <P>特价商品</P>
                    <P>SanDisk32GB存储卡</P>
                    <div class="price">
                        <p>79元</p>
                        <p>100元</p>
                    </div>
                    <P>还有更多特价商品</P>
                </div>
                <div class="on-sale sale2">
                    <P>特惠配件套餐</P>
                    <P>手机必备配件组合购买</P>
                    <P>实惠更优惠</P>
                </div>
                <div class="on-sale sale3">
                    <P>我爱酷玩</P>
                    <P>邂逅炫酷的电子产品</P>
                    <P>结交趣味相投的朋友</P>
                </div>
                <div class="user">
                    <div class="way"><p>企业用户采购通道</p><i class="iconfont icon-icon1"></i></div>
                    <div class="way"><p>小米手机防伪查询</p><i class="iconfont icon-icon1"></i></div>
                    <div class="way"><p>小米手机官翻版</p><i class="iconfont icon-icon1"></i></div>
                    <div class="way"><p>小米路由器官翻版</p><i class="iconfont icon-icon1"></i></div>
                    <div class="way"><p>米粉红包</p><i class="iconfont icon-icon1"></i></div>
                    <p class="recharge-text">话费充值</p>
                    <div class="input-num">
                        <input type="text" placeholder="请输入手机号">
                    </div>   
                    <select class="form-select">
                        <option value="0">100元</option>
                        <option value="1">999元</option>
                        <option value="2">9999999元</option>
                    </select>   
                    <p class="true-pay">实付价格98.4元起</p>    
                    <button class="pat-now">立即充值</button>         
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="foot-mid">
            <div class="foot-mid-top">
                <div class="after-sale"><p>一小时快修服务</p></div>
                <div class="after-sale"><p>七天无理由退货</p></div>
                <div class="after-sale"><p>15天免费换货</p></div>
                <div class="after-sale"><p>满150元包邮</p></div>
                <div class="after-sale"><p>520余家售后网点</p></div>
            </div>
            <div class="foot-mid-mid">
                <div class="our-imformation">
                    <p>帮助中心</p>
                    <p class="our-imformation-text">购物指南</p>
                    <p class="our-imformation-text">支付方式</p>
                    <p class="our-imformation-text">配送方式</p>
                </div>
                <div class="our-imformation">
                    <p>服务支持</p>
                    <p class="our-imformation-text">售后政策</p>
                    <p class="our-imformation-text">自助服务</p>
                    <p class="our-imformation-text">相关下载</p>
                </div>
                <div class="our-imformation">
                    <p>小米之家</p>
                    <p class="our-imformation-text">小米之家</p>
                    <p class="our-imformation-text">服务网店</p>
                    <p class="our-imformation-text">预约亲临到点服务</p>
                </div>
                <div class="our-imformation">
                    <p>关于小米</p>
                    <p class="our-imformation-text">了解小米</p>
                    <p class="our-imformation-text">加入小米</p>
                    <p class="our-imformation-text">联系我们</p>
                </div>
                <div class="our-imformation">
                    <p>关注我们</p>
                    <p class="our-imformation-text">新浪微博</p>
                    <p class="our-imformation-text">小米部落</p>
                    <p class="our-imformation-text">官方微信</p>
                </div>
                <div class="customer-service">
                    <p>400-100-5678</p>
                    <p>周一至周日8:00-18:00</p>
                    <p>（仅收市话费）</p>
                    <button>24小时在线客服</button>
                </div>
            </div>
            <div class="foot-mid-bottom">
                <div class="web">
                    <p>
                        小米旗下网站：
                        <span>小米网</span>
                        <span>MIUI</span>
                        <span>米聊</span>
                        <span>多看书城</span>
                        <span>小米路由器</span>
                        <span>繁体香港</span>
                        <span>繁体台湾</span>
                        <span>English</span>
                        <span>小米后院</span>
                        <span>小米天猫店</span>
                        <span>小米淘宝直营店</span>
                        <span>小米网盟</span>
                    </p>
                </div>
                <div class="web">
                    <p>©mi.com京ICP证110507号    京ICP备10046444号   京公网安备1101080212535号  京网文[2014]0059-0009号</p>
                </div>
                <div class="web web-language">
                    <img src="images/16.png" alt="">
                    <select class="language">
                        <option value="0">简体中文</option>
                        <option value="1">繁体中文</option>
                        <option value="2">英语</option>
                    </select>   
                </div>
            </div>
    </div>
    <script>
        $(".spot span").click(function(){
            index = $(this).index();
            animate(index)
        })
        function animate(index){
            $(".wrap img").eq(index).fadeIn().siblings().fadeOut();
            $(".spot span").eq(index).addClass("current").siblings().removeClass("current")
        }
    </script>
</body>
</html>